<template>
    <div class="cont">
        <van-popup v-model="show" position="bottom" close-on-popstate round @close="close" closeable>
            <div class="p-20 content">
                <div class="text-center m-b-20 font-16 text-bold">{{ type == 1 ? '选择关键词' : '查看关键词' }}</div>
                <van-list class="list" v-if="list && list.length > 0" v-model="isUpLoading" :finished="finished"
                    finished-text="" @load="onLoadMore">
                    <span class="m-r-10 m-b-10" v-for="(item, index) in list" :key="item.id"
                        @click="slectKeyword(item, index)">
                        <van-tag class="p-tb-3 p-lr-8 m-b-10" type="success" :closeable="type != 1 ? true : false"
                            @close="delKeyword(item, index)"> {{ item.title
                            }}<van-icon v-if="type == 1" name="plus" /></van-tag>
                    </span>
                </van-list>
                <noData v-else marginTop="50px" text="暂无关键词" />
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Popup, Tag, Button, List, Dialog } from 'vant'
export default {
    components: {
        [Popup.name]: Popup,
        [Tag.name]: Tag,
        [List.name]: List,
        [Button.name]: Button,
        [Dialog.name]: Dialog
    },
    props: {
        popupVisible: {
            type: Boolean,
            default: false
        },
        type: {
            type: [Number, String],
            default: 1
        },
        username: {
            type: [Number, String],
            default: 0
        }
    },
    data() {
        return {
            show: this.popupVisible,
            page: 1,
            list: [],
            finished: false, // 控制在页面往下移动到底部时是否调用接口获取数据
            isUpLoading: false, // 上拉加载
            selectList: [],
            keywordData: {}
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.$api.keywordList({ username: this.username, page: this.page, page_size: 100, exclude_username: this.type == 1 ? 1 : 0 }, true).then(async res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.list = [...this.list, ...res.data.list]
                this.isUpLoading = false
                this.page++
                if (this.list.length === res.data.total) {
                    this.finished = true
                }
            }).catch(async res => {
                this.finished = true
            })
        },
        onLoadMore() {
            this.getList()
        },
        close() {
            this.$emit('close')
        },
        confrim() {
            this.$api.keywordAddOrUpdate({
                id: this.keywordData.id,
                username: this.keywordData.user_name,
                title: this.keywordData.title,
                reply: this.keywordData.reply,
                reply_type: this.keywordData.reply_type,
                status: 1
            }).then(res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                this.list.splice(this.keywordData.index, 1)
                this.$toast('添加成功')
                this.$emit('submits')
            })
        },
        slectKeyword(item, index) {
            // item.isChecked = item.isChecked ? false : true
            // this.$set(this.list, index, item)
            // this.$forceUpdate()
            if (this.type == 1) {
                let arr = item.user_name.split(',')
                arr.push(this.username)
                item.user_name = arr.join(',')
                this.keywordData = item
                this.keywordData.index = index
                this.confrim()
            }
        },
        // 删除关键词
        delKeyword(item, index) {
            Dialog.confirm({
                title: '温馨提示',
                message: '确定要移除该关键词回复吗？'
            })
                .then(() => {
                    let arr = item.user_name.split(',')
                    let i = arr.findIndex(t => t == this.username)
                    arr.splice(i, 1)
                    this.$api.keywordAddOrUpdate({
                        id: item.id,
                        username: arr.join(','),
                        title: item.title,
                        reply: item.reply,
                        reply_type: item.reply_type,
                        status: 1
                    }).then(async res => {
                        if (res.code != 1) {
                            return this.$toast(res.msg)
                        }
                        this.list.splice(index, 1)
                        this.$toast('删除成功')
                        this.$emit('submits')
                    })
                })
                .catch(() => {
                    // on cancel
                });
        },
    }
}
</script>
<style lang="less" scoped>
.cont {
    .bottom-btn {
        border-radius: 40px;
    }

    .list {
        height: 200px;
        overflow-x: hidden;
        overflow-y: auto;
    }

}
</style>